<template>
  <div class="map_container">
    <div class="weather">
      <!--摄氏度-->
      <div class="city">
        <a :href="'../city/main?name='+ cityName+ '&lat=' + latitude + '&lon=' + longitude" >
          <van-icon name="location" size="18px" custom-style="margin-right:4px"/>{{cityName}}
        </a>
      </div>
      <div class="h">{{weather.tmp}}℃</div>
      <div class="font">{{weather.cond_txt}}  {{weather.wind_dir}}</div>
      <div class="font">{{weather.minWeather}}℃/{{weather.maxWeather}}℃</div>
    </div>
    <van-cell-group border="false" custom-class="cell-group">
      <van-cell title="近三日天气" border="false"/>
      <van-cell
        v-for="(item,index) in weatherOne" :key="index"
        :value="item.tmp_min+'℃/'+item.tmp_max+'℃'"
      >
        <div slot="title">
          <span class="van-cell-text">{{item.day+' '+item.date}}</span>
          <van-tag type="danger" >
            <img :src="'/static/img/' + item.cond_code_d + '.png'" alt="">{{item.cond_txt_d}}
          </van-tag>
        </div>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
  // import QQMapWX from '@/../dist/wx/libs/qqmap'
  // var qqmapsdk
  let url = 'https://free-api.heweather.com/s6/weather'
  const db = wx.cloud.database()
  export default {
    data () {
      return {
        cityName: '',
        nowName: '',
        weatherData: '',
        placeData: {},
        markers: [],
        cond_code_d: 100,
        latitude: '',
        longitude: '',
        weatherOne: [],
        weather: {},
        key: '8c6dce5bf6b34cce81c0fb3ee9098b35',
        cityChoice: this.$store.state.city
      }
    },
    methods: {
      onCity () {
        let self = this
        if (!self.nowName) {
          self.nowName = self.cityName
        }
        // console.log(self.latitude, self.longitude)
        // wx.navigateTo({
        //   url: '../city/main?name=' + self.nowName + '&lat=' + self.latitude + '&lon=' + self.longitude
        // })
      },
      onAjax (url, data, callback) {
        wx.request({
          url: url,
          data: data,
          success: function (res) {
            callback(res)
          },
          error (res) {
            // console.log(res)
          }
        })
      },
      onCommon (data) {
        let self = this
        let oDay = ['今天', '明天', '后天']
        /* 实况天气 */
        self.onAjax(url + '/now', data,
          function (res) {
            self.weather = res.data.HeWeather6[0].now
            /* 三天天气预报 */
            self.onAjax(url + '/forecast', data,
              function (res) {
                if (res.statusCode === 200) {
                  self.cityName = res.data.HeWeather6[0].basic.parent_city
                  self.weatherOne = res.data.HeWeather6[0].daily_forecast
                  for (let i = 0; i < self.weatherOne.length; i++) {
                    self.weatherOne[i].day = oDay[i]
                  }
                  self.weather.maxWeather = res.data.HeWeather6[0].daily_forecast[0].tmp_max
                  self.weather.minWeather = res.data.HeWeather6[0].daily_forecast[0].tmp_min
                }
              })
          })
      },
      onGet () {
        db.collection('city').get({
          success: function (res) {
            // console.log(res)
          }
        })
      }
    },
    onLoad () {
      let self = this
      // 页面加载时触发。一个页面只会调用一次
      // 用户授权获取当前地理位置
      let Location = wx.getStorageSync('Location') || ''
      // console.log(Location)
      wx.getLocation({
        success (res) {
          self.latitude = res.latitude
          self.longitude = res.longitude
          let data = {
            location: self.latitude + ',' + self.longitude,
            key: self.key
          }
          let addName = {title: self.cityName, lat: self.latitude, lon: self.longitude}
          self.onCommon(data)
          wx.setStorageSync('Location', Location)
          self.$store.commit('cityChoice', {addName})
        },
        fail (res) {
          // 取消授权地理位置 设置默认为北京
          self.latitude = '39.90498734'
          self.longitude = '116.4052887'
          let data = {
            location: self.latitude + ',' + self.longitude,
            key: self.key
          }
          let addName = {title: self.cityName, lat: self.latitude, lon: self.longitude}
          self.onCommon(data)
          self.$store.commit('cityChoice', addName)
        }
      })
    },
    onShow: function () {
      let opt = this.$store.state.city
      if (opt.lat || opt.lon) {
        let data = {
          location: opt.lat + ',' + opt.lon,
          key: this.key
        }
        this.latitude = opt.lat
        this.longitude = opt.lon
        if (opt.name !== this.cityName) {
          this.onCommon(data)
        }
      }
    }
  }
</script>

<style>
  page{
    background:linear-gradient(#59bcf9,#669DF8) ;
  }
  page .font{
    font-size:16px
  }
  page .cell-group{
    margin: 0 18px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }
  page .van-cell{
    background-color:initial;
  }
  .weather{
    text-align: center;
    margin: 10px 0 40px;
  }
  .weather .h{
    font-size: 40px;
    font-weight: bold;
  }
  ._img{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-left: 6px;
  }
  page .van-cell__title{
     flex: initial;
   }
</style>
